<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Add audio content</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<f:view>
<f:loadBundle basename="ResourceBundle" var="bundle"/>
<div id="addAudioContentExternal" align="left">

    <div id="add-audio-content">
        <h:form id="uploadAudioFileForm" enctype="multipart/form-data">
            <h:panelGrid columns="1" width="25%" border="0" style="position: absolute; top: 10%;text-align:left;">
                <embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                       type="application/x-shockwave-flash" bgcolor="#0e73fc" width="280" height="50"
                       src="http://www.esnips.com//escentral/images/widgets/flash/esnips_player.swf"
                       flashvars="theTheme=blue&amp;autoPlay=no&amp;theFile=http://www.esnips.com//nsdoc/707ea2e3-6bd9-4431-906d-a234c87b6ac7&amp;theName=Amul Macho - Advertisement - Mp3 - SuYoG&trade;&amp;thePlayerURL=http://www.esnips.com//escentral/images/widgets/flash/mp3WidgetPlayer.swf">
                </embed>
            </h:panelGrid>
        </h:form>

        <h:form id="addAudioContentForm">
            <div style="position: absolute; top: 1%; left: 10%;">
                <h:outputText value="N #{audioContentBean.contentId}" style=" width: 40px;background-color:#e8e7e9;"/>
            </div>
            <div id="left-add-audio-content" align="center">

                <h:outputText value="#{bundle.declare_budget}" styleClass="labels" style="top:10px"/>
                <h:inputText value="#{audioContentBean.newAudioContentBudget}" styleClass="fields" style="top:10px"/>
                <br>
                <br>
                <h:outputText value="#{bundle.declareViewingCost}" styleClass="labels"/>
                <h:inputText value="#{audioContentBean.newContentViewingCost}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentStatus}" styleClass="labels"/>
                <h:inputText readonly="true" value="#{audioContentBean.audioContentStatus}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentCategory}" styleClass="labels"/>
                <h:selectOneMenu value="#{audioContentBean.chosenCategoryId}" styleClass="fields">
                    <f:selectItems value="#{audioContentBean.categories}"/>
                </h:selectOneMenu>
                <br>
                <br>
                <h:outputText value="#{bundle.advertiserSite}" styleClass="labels"/>
                <h:inputText value="#{audioContentBean.advertiserSite}" styleClass="fields"/>
            </div>

            <div id="right-add-audio-content">
                <div style="position:absolute;top:1%;left:1%;width: 80%;height: 40%;">
                    <h:outputText value="#{bundle.newContentName}" styleClass="labels"/>
                    <h:inputText value="#{audioContentBean.newContentName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.newAdvertiserName}" styleClass="labels"/>
                    <h:inputText value="#{audioContentBean.newAdvertiserName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.textDescription}" styleClass="labels"/>
                    <br>
                    <h:inputTextarea value="#{audioContentBean.description}" style="width: 96%;height: 40px"/>
                </div>
                <div style="position:absolute;top:5%;right:1%;width: 18%;height: 40%; text-align: center;background-color: #e8e7e9">
                    <div style="position: absolute; top: 1%; right: 1%; background-color: #7ccff5">
                        <strong>
                            <h:outputText value="Language of "/>
                            <br>
                            <h:outputText value="uploadable content"/>
                            <br>
                            <h:commandLink value="EN"/>
                            <h:commandLink value="HI"/>
                            <h:commandLink value="TAM"/>
                        </strong>
                    </div>
                </div>
                <div id="new-content-groups">
                    <h:outputText value="#{bundle.chooseAvailableGroups}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{audioContentBean.chosenGroups}" layout="pageDirection">
                            <f:selectItems value="#{audioContentBean.groups}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{audioContentBean.checkAllGroups}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{audioContentBean.clearAllGroups}"/>
                    </div>
                </div>
                <div id="new-content-regions">
                    <h:outputText value="#{bundle.chooseAvailableRegions}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{audioContentBean.chosenRegions}" layout="pageDirection">
                            <f:selectItems value="#{audioContentBean.regions}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{audioContentBean.checkAllRegions}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{audioContentBean.clearAllRegions}"/>
                    </div>
                </div>
            </div>
            <div style="position: absolute;bottom: 1%; right: 1%">
                <h:commandButton value="#{bundle.uploadContentButton}" action="#{audioContentBean.toAudioContent}"/>
                <h:commandButton value="#{bundle.cancelButton}" action="#{audioContentBean.backToAudioContent}"/>
            </div>
        </h:form>
    </div>
    </f:view>
</body>
</html>